<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('WaterDelivery首页')">
	<meta charset="UTF-8">
</head>
<body>
<div style="height: 100%; width: 100%; overflow: hidden;" id="waterDeliveryDiv">
	<div style="width: 8%; height: 100%; padding-top: 10px; padding-left: 3px; padding-right: 3px; float: left;">
		<a href="javascript:;" style="height: 56px;" class="list-group-item" v-for="(data, index) in menus" @click="openUrl(data.src, index)" v-bind:class="{active:index==currentIndex}">{{data.name}}</a>
	</div>
	<div style="width: 91%; height: 100%; float: left; border-left: solid 1px;">
		<iframe 
			width="100%"
			height="100%"
			frameborder=0
			v-bind:src="iframeUrl"
		></iframe>
	</div>
</div>
<!-- js引入 -->
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
/*<![CDATA[*/
ctxPath = [[@{/}]];
/*]]>*/
var app = new Vue({
	el: '#waterDeliveryDiv',
	data: {
		menus: [],
		currentIndex: 0,
		iframeUrl: ''
	},
	methods: {
		init: function() {
			this.menus = [{
				name: '渠道信息',
				src: ctxPath+'router/waterdelivery/canalSystem/list'
			},{
				name: '渠道进水口信息',
				src: ctxPath+'router/waterdelivery/canalSystemInTake/list'
			},{
				name: '断面信息',
				src: ctxPath+'router/waterdelivery/canalSystemSection/list'
			},{
				name: '分段信息',
				src: ctxPath+'router/waterdelivery/canalSystemSubSection/list'
			},{
				name: '跌水信息',
				src: ctxPath+'router/waterdelivery/drop/list'
			},{
				name: '倒虹吸信息',
				src: ctxPath+'router/waterdelivery/invertedSiphon/list'
			},{
				name: '扬水站信息',
				src: ctxPath+'router/waterdelivery/pumpingStation/list'
			},{
				name: '渡槽信息',
				src: ctxPath+'router/waterdelivery/sluice/list'
			},{
				name: '陡坡信息',
				src: ctxPath+'router/waterdelivery/steepSlope/list'
			},{
				name: '隧洞信息',
				src: ctxPath+'router/waterdelivery/tunnel/list'
			}];
			this.iframeUrl = this.menus[this.currentIndex].src;
		},
		openUrl: function(url, index) {
			app.currentIndex = index;
			app.iframeUrl = url;
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>